<template>
  <div>

    <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px" append-to-body>
      <div class="list_box">
        <el-button style="margin-bottom: 10px;" type="primary" @click="openAdd">新增</el-button>
        <div class="table_box">
          <el-table ref="table" :data="tableData" border>
            <!-- <el-table-column prop="id" label="ID" width="55"></el-table-column> -->
            <!-- <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column> -->
            <el-table-column prop="account" label="支付宝"></el-table-column>
            <el-table-column prop="appId" label="appId"></el-table-column>
            <!-- <el-table-column prop="zfbPublicKey" label="支付宝公钥"> </el-table-column>
            <el-table-column prop="publicKey" label="应用公钥"></el-table-column>
            <el-table-column prop="privateKey" label="应用私钥"></el-table-column> -->
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="openEdit(scope.$index)">编辑</el-button>
                <el-button type="del" @click="del(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-dialog append-to-body :visible.sync="addShow" title="支付宝参数">
        <div class="form-box new_form_box">
          <el-form ref="formAdd" :model="form" :inline="true" :rules="rules" label-width="100px" class="demo-ruleForm">

            <!-- <el-form-item label="支付宝名称" prop="name" >
              <el-input v-model="form.name" placeholder="请输入支付宝名称" />
            </el-form-item> -->
            <el-form-item label="支付宝账号" prop="account">
              <el-input v-model="form.account" placeholder="请输入你的支付宝账号" />
            </el-form-item>
            <el-form-item label="appId" prop="appId">
              <el-input v-model="form.appId" placeholder="请输入支付宝后台的appId" />
            </el-form-item>
            <el-form-item class="row" label="支付宝公钥" prop="zfbPublicKey" label-width="90px">
              <el-input v-model="form.zfbPublicKey" type="textarea" placeholder="请填写支付宝公钥" :rows="4" />
            </el-form-item>
            <el-form-item class="row" label="应用公钥" prop="publicKey" label-width="80px">
              <el-input v-model="form.publicKey" type="textarea" placeholder="请填写应用公钥" :rows="4" />
            </el-form-item>
            <el-form-item class="row" label="应用私钥" prop="privateKey" label-width="80px">
              <el-input v-model="form.privateKey" type="textarea" placeholder="请填写应用私钥" :rows="4" />
            </el-form-item>

            <div class="center">
              <el-button @click="close()">取消</el-button>
              <el-button type="primary" @click="submitForm('formAdd')" v-loading="loading">提交</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </el-dialog>
  </div>

</template>

<script>
import {
  addtenantPushSettings,
  getTenantPushSettingsByTenantId,
  delTenantPushSettings,
} from "@/api/system/shopManage";

export default {
  name: "addFina",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value && value.length != 11) {
        callback(new Error("请输入11位手机号"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      loading: false,
      title: "支付宝管理",
      isEdit: false,
      // 表单参数
      form: {
        account: "",
        appId: "",
        zfbPublicKey: "",
        publicKey: "",
        privateKey: "",
      },
      rules: {
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        name: [{ required: true, message: "请输入", trigger: "change" }],
        tel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
      },
      tenantInfo: "",
      settingId: "",
      tableData: [],

      addShow: false,
      currZfbIndex: "",
    };
  },
  created() {},
  methods: {
    // 打开弹窗
    open(tenantInfo) {
      this.tenantInfo = tenantInfo;
      this.dialogVisible = true;
      this.getList();
    },
    // 获取支付宝列表
    getList() {
      this.tableData = [];
      getTenantPushSettingsByTenantId({
        tenantId: this.tenantInfo.tenantId,
        type: 4, //4支付宝管理
      }).then((res) => {
        if (res.data && res.data.settingsJson) {
          this.settingId = res.data.id;
          const arr = JSON.parse(res.data.settingsJson);
          if (arr && arr.length) {
            this.tableData = arr;
          }
        }
      });
    },
    // 添加支付宝
    openAdd() {
      this.form = {
        account: "",
        appId: "",
        zfbPublicKey: "",
        publicKey: "",
        privateKey: "",
      };
      this.addShow = true;
    },
    // 编辑支付宝信息
    openEdit(index) {
      this.currZfbIndex = index;
      this.form = {
        ...this.tableData[index],
      };
      this.addShow = true;
    },
    // 删除一条信息
    del(index) {
      this.$confirm(
        "删除后不可查询该支付宝的账户流水，确认删除该支付宝吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.tableData.splice(index, 1);
          if (this.tableData.length) {
            this.save();
          } else {
            // 清空配置
            this.clearList()
          }
        })
        .catch(() => {});
    },
    // 清空配置
    clearList() {
      delTenantPushSettings(this.settingId).then((res) => {
        this.$message.success(res.msg);
        this.addShow = false;
      });
    },
    // 保存到后台
    save() {
      addtenantPushSettings({
        tenantId: this.tenantInfo.tenantId,
        tenantName: this.tenantInfo.tenantName,
        settingsJson: JSON.stringify(this.tableData),
        type: 4,
      }).then((res) => {
        this.getList()
        this.$message.success(res.msg);
        this.addShow = false;
      });
    },

    // 重置
    reset() {
      this.$refs.formAdd.resetFields();
    },

    /** 查询详情进行回显 */
    handleUpdate(row) {
      this.form = row;
    },
    submitForm(formName) {
      this.$refs["" + formName].validate((valid) => {
        if (valid) {
          if (this.currZfbIndex === "") {
            // 添加第一个支付宝
            this.tableData.push({ ...this.form });
          } else if (this.currZfbIndex === 0 || this.currZfbIndex > 0) {
            const Temp = [...this.tableData];
            Temp[this.currZfbIndex] = { ...this.form };
            this.tableData = [...Temp];
            this.$refs.table.doLayout();
          }
          this.save();
        } else {
          this.$alert("请填写完整！");
        }
      });
    },

    close() {
      this.addShow = false;
    },
  },
};
</script>
<style scoped lang="css">
.center {
  text-align: center;
}
.form-box {
  padding-top: 20px;
}
</style>
